<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RAG链问答系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
        body { font-family: 'Noto Sans SC', sans-serif; }
        .chat-container { height: calc(100vh - 240px); overflow-y: auto; }
        .doc-container { max-height: 300px; overflow-y: auto; }
        .loader { border-top-color: #3b82f6; animation: spinner 0.6s linear infinite; }
        @keyframes spinner { to { transform: rotate(360deg); } }
    </style>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
    <header class="bg-blue-600 text-white p-4 shadow-lg">
        <div class="container mx-auto flex justify-between items-center">
            <h1 class="text-2xl font-bold flex items-center">
                <i class="fa fa-comments-o mr-2"></i>RAG链问答系统
            </h1>
            <div class="flex items-center space-x-4">
                <span id="status-indicator" class="flex items-center"><i class="fa fa-circle text-green-300 mr-1"></i>服务运行中</span>
                <a href="/static/admin_dashboard.html" target="_blank" class="bg-blue-700 text-white px-4 py-1 rounded hover:bg-blue-800 transition-colors flex items-center">
                    <i class="fa fa-cog mr-1"></i>管理员后台
                </a>
                <button id="login-btn" class="bg-white text-blue-600 px-4 py-1 rounded hover:bg-blue-50 transition-colors flex items-center">
                    <i class="fa fa-user mr-1"></i>登录
                </button>
                <button id="theme-toggle" class="p-2 rounded-full hover:bg-blue-700 transition-colors">
                    <i class="fa fa-moon-o"></i>
                </button>
            </div>
        </div>
    </header>

    <main class="container mx-auto p-4 flex-grow">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- 左侧：问答区域 -->
            <div class="lg:col-span-2 flex flex-col">
                <div class="bg-white rounded-lg shadow-md p-4 mb-6 flex-grow flex flex-col">
                    <h2 class="text-xl font-semibold mb-4 flex items-center"><i class="fa fa-question-circle text-blue-500 mr-2"></i>问答历史</h2>
                    <div id="chat-container" class="chat-container mb-4 p-2 bg-gray-50 rounded-md">
                        <!-- 问答内容将动态加载 -->
                        <div class="text-center text-gray-500 py-8">
                            <i class="fa fa-comment-o text-4xl mb-2"></i>
                            <p>请在下方输入问题开始对话</p>
                        </div>
                    </div>
                    <div class="flex space-x-2">
                        <input
                            type="text"
                            id="question-input"
                            placeholder="请输入您的问题..."
                            class="flex-grow px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                        >
                        <button
                            id="submit-question"
                            class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors flex items-center"
                        >
                            <i class="fa fa-paper-plane mr-1"></i>提交
                        </button>
                    </div>
                </div>
            </div>

            <!-- 右侧：相关文档 -->
            <div class="lg:col-span-1 flex flex-col">
                <div class="bg-white rounded-lg shadow-md p-4 mb-6 flex-grow">
                    <h2 class="text-xl font-semibold mb-4 flex items-center"><i class="fa fa-file-text-o text-blue-500 mr-2"></i>相关文档</h2>
                    <div id="documents-container" class="doc-container p-2 bg-gray-50 rounded-md">
                        <div class="text-center text-gray-500 py-8">
                            <i class="fa fa-file-o text-4xl mb-2"></i>
                            <p>提交问题后将显示相关文档</p>
                        </div>
                    </div>
                </div>

                <!-- 文档上传 -->
                <div class="bg-white rounded-lg shadow-md p-4 mb-6">
                    <h2 class="text-xl font-semibold mb-4 flex items-center"><i class="fa fa-upload text-blue-500 mr-2"></i>上传文档</h2>
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-blue-500 transition-colors cursor-pointer" id="upload-area">
                        <i class="fa fa-file-text-o text-4xl text-gray-400 mb-2"></i>
                        <p class="text-gray-500 mb-2">拖放文件到此处或</p>
                        <label for="file-upload" class="text-blue-600 hover:text-blue-800 transition-colors cursor-pointer">上传文档 (TXT, PDF, Word)</label>
                        <input type="file" id="file-upload" class="hidden" accept=".txt,.pdf,.docx">
                        <p class="text-xs text-gray-400 mt-2">支持TXT、PDF和Word格式文件</p>
                    </div>
                    <div id="upload-status" class="mt-2 text-sm hidden"></div>
                </div>

                <!-- 知识库管理 -->
                <div class="bg-white rounded-lg shadow-md p-4">
                    <h2 class="text-xl font-semibold mb-4 flex items-center"><i class="fa fa-book text-blue-500 mr-2"></i>知识库管理</h2>
                    <button id="refresh-documents" class="mb-3 px-4 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors flex items-center text-sm">
                        <i class="fa fa-refresh mr-1"></i>刷新文档列表
                    </button>
                    <div id="knowledge-base-container" class="doc-container p-2 bg-gray-50 rounded-md max-h-64">
                        <div class="text-center text-gray-500 py-8">
                            <i class="fa fa-folder-open-o text-4xl mb-2"></i>
                            <p>点击刷新按钮加载文档列表</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer class="bg-gray-800 text-white p-4 mt-6">
        <div class="container mx-auto text-center text-sm">
            <p>RAG链问答系统 &copy; 2023 | 基于FastAPI和TextVectorizer构建</p>
        </div>
    </footer>

    <!-- 登录模态框 -->
<div id="login-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-md p-6 transform transition-all">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl font-semibold text-gray-800">用户登录</h3>
            <button id="close-login" class="text-gray-400 hover:text-gray-600 transition-colors">
                <i class="fa fa-times text-xl"></i>
            </button>
        </div>
        <div id="login-error" class="mb-4 text-red-500 hidden"></div>
        <form id="login-form">
            <div class="mb-4">
                <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                <input type="text" id="username" name="username" required
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div class="mb-6">
                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                <input type="password" id="password" name="password" required
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div class="flex space-x-3">
                <button type="submit" class="flex-grow bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center">
                    <i class="fa fa-sign-in mr-1"></i>登录
                </button>
                <button type="button" id="cancel-login" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                    取消
                </button>
            </div>
        </form>
    </div>
</div>

<script src="static/js/script.js"></script>
<script>
    // 登录相关功能
    document.addEventListener('DOMContentLoaded', function() {
        const loginBtn = document.getElementById('login-btn');
        const loginModal = document.getElementById('login-modal');
        const closeLogin = document.getElementById('close-login');
        const cancelLogin = document.getElementById('cancel-login');
        const loginForm = document.getElementById('login-form');
        const loginError = document.getElementById('login-error');
        const refreshDocumentsBtn = document.getElementById('refresh-documents');

        // 打开登录模态框
        loginBtn.addEventListener('click', function() {
            loginModal.classList.remove('hidden');
            loginError.classList.add('hidden');
        });

        // 关闭登录模态框
        function closeLoginModal() {
            loginModal.classList.add('hidden');
            loginForm.reset();
            loginError.classList.add('hidden');
        }

        closeLogin.addEventListener('click', closeLoginModal);
        cancelLogin.addEventListener('click', closeLoginModal);

        // 点击模态框外部关闭
        loginModal.addEventListener('click', function(e) {
            if (e.target === loginModal) {
                closeLoginModal();
            }
        });

        // 处理登录表单提交
        loginForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            // 显示加载状态
            loginError.classList.add('hidden');
            loginBtn.disabled = true;

            // 调用登录API
            const apiUrl = `http://${window.location.hostname}:${window.location.port}/token`;
            fetch(apiUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: new URLSearchParams({
                    'username': username,
                    'password': password
                })
            })
            .then(response => {
                loginBtn.disabled = false;
                if (!response.ok) {
                    throw new Error('用户名或密码错误');
                }
                return response.json();
            })
            .then(data => {
                // 保存token
                localStorage.setItem('access_token', data.access_token);
                // 关闭模态框
                closeLoginModal();
                // 更新UI
                loginBtn.innerHTML = '<i class="fa fa-user-circle mr-1"></i>' + username;
                // 刷新文档列表
                if (refreshDocumentsBtn) {
                    refreshDocumentsBtn.click();
                }
            })
            .catch(error => {
                loginBtn.disabled = false;
                loginError.textContent = error.message;
                loginError.classList.remove('hidden');
            });
        });

        // 检查是否已经登录
        function checkLoginStatus() {
            const token = localStorage.getItem('access_token');
            if (token) {
                // 解析token获取用户名
                try {
                    const payload = JSON.parse(atob(token.split('.')[1]));
                    const username = payload.sub;
                    loginBtn.innerHTML = '<i class="fa fa-user-circle mr-1"></i>' + username;
                } catch (e) {
                    // 无效的token
                    localStorage.removeItem('access_token');
                }
            }
        }

        checkLoginStatus();
    });
</script>
</body>
</html>